<script setup lang="ts">

import {ref, onMounted} from 'vue'
import { Search,ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ElTable } from 'element-plus'
import { ElButton, ElDialog } from 'element-plus'
import router from '@/router'
import { GetUser } from "@/utils/lStorage"

import {formatCreateTime} from "@/utils/format"
import {apiGroupList,apiGroupDelete,apiGroupCreate, apiDeviceList} from '@/api/api'


const searchKey = ref({
  name :"",
  desc :"",
})
const pageConfig = ref({
  pageNum : 1,
  pageSize :15,
  total:0,

})





const groupList = ref([])

async function handlerGroupList() {
  const req = {
    _pageNumber:pageConfig.value.pageNum,
    _pageSize:pageConfig.value.pageSize,
  }
  if (searchKey.value.name){
    req.DeviceGroupName  = searchKey.value.name
  }
  if (searchKey.value.desc){
    req.Desc  = searchKey.value.desc
  }


  const data = await apiGroupList(req)
  if (data.CODE != "ok") {
      console.log(data)
      ElMessage.error("执行失败， 请联系管理员")
      return 
  }

  pageConfig.value.pageNum = data.DATA.PageNumber
  pageConfig.value.pageCount = data.DATA.PageCount
  pageConfig.value.pageSize = data.DATA.PageSize
  pageConfig.value.total = data.DATA.TotalCount
  groupList.value = data.DATA.DeviceGroupList
}





const paramCreate =ref({
  openFlag: false ,
  DeviceGroupName:"",
  Desc:""
})


async function handlerGroupCreate() {
  if (!paramCreate.value.DeviceGroupName){
      ElMessage.error("请输入分组名称")
      return 
  }
  const data = await apiGroupCreate(paramCreate.value)
  if (data.CODE != "ok") {
      console.log(data)
      ElMessage.error("执行失败， 请联系管理员")
      return 
  }

  ElMessage({
    message: '创建成功',
    type: 'success',
  })

  handlerGroupList()
  paramCreate.value = {}
  return 
}


const handleGroupDetail = (item) => {
  router.push({ path: '/group/detail', query: { "id": item.DeviceGroupId } })
}

async function handlerGroupDelete(item)  {
 
  const req= {
    DeviceGroupId: item.DeviceGroupId,
  }
  const data = await  apiGroupDelete(req)
  if (data.CODE != "ok") {
      console.log(data)
      ElMessage.error("执行失败， 请联系管理员")
      return 
  }

    ElMessage({
      message: '操作成功！',
      type: 'success',
    })
  handlerGroupList()
    
}



onMounted(() => {
  handlerGroupList()
})

</script>

<template>
  <el-row :gutter="20" justify="space-between" >
    <el-col :span="8">
      <el-button type="primary" @click="paramCreate.openFlag=true" >添加</el-button>
    </el-col>
    <el-col :span="16">
      <el-row justify="end" :gutter="10">
        <el-col  :span="4"> 
            <el-input v-model="searchKey.name" placeholder="名称" clearable />
        </el-col>
        <el-col  :span="6"> 
            <el-input v-model="searchKey.desc" placeholder="说明" clearable />
        </el-col>
        <el-col :span="2"> 
          <el-button   class='pagination' type="primary" :icon="Search" @click="handlerGroupList" >查询</el-button>
        </el-col>
      </el-row>
    </el-col>

  </el-row>

<div class="info_box">
  <el-table :data="groupList" style="width: 100%">
    <el-table-column prop="DeviceGroupName" label="名称" width="300" />
    <el-table-column prop="Desc" label="说明"  />
    <el-table-column prop="DeviceCount" label="设备数量" width="300" />


    <el-table-column prop="CreateTime" label="创建时间" :formatter="formatCreateTime" width="180" />

    <el-table-column label="操作" width="350" >
        <template  #default="item">
          <el-button link type="primary" @click="handleGroupDetail(item.row)">详情</el-button>
          <el-button link type="danger" @click="handlerGroupDelete(item.row)"  >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <el-pagination class='pagination' size="large" :page-size="pageConfig.pageSize" layout=" prev, pager, next, total" :total="pageConfig.total"
      v-model:current-page="pageConfig.pageNum" @current-change="handlerSkillList" />

</div>


<el-dialog v-model="paramCreate.openFlag" title="添加" :with-header="false">
  <div class="info_box">
    
  <el-form :model="paramCreate" label-width="120px">
    <el-form-item label="名称">
      <el-input v-model="paramCreate.DeviceGroupName" clearable/>
    </el-form-item>

  <el-form-item label="说明">
      <el-input v-model="paramCreate.Desc"     
        autosize
        clearable
      type="textarea"
      placeholder="配置说明"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handlerGroupCreate">提交</el-button>
      <el-button @click="paramCreate.openFlag=false">取消</el-button>
    </el-form-item>
   </el-form>
  </div>

  </el-dialog>


</template>

<style scoped>

.pagination {
  float: right;
}

.right_button{
  float: right;
}
.box_create{
/*   padding: 3em; */
  width: 300px;
}

</style>